import {ProForm, ProFormDatePicker, ProFormInstance, ProFormText} from "@ant-design/pro-components";
import {Button, Checkbox, DatePicker, DatePickerProps, Form, Input, Radio, Select, Space} from "antd";
import {useRef} from "react";
import moment from 'moment';
import {parseTime} from "@/utils/format";

const {RangePicker} = DatePicker

function CcForm(){
    let obj =  {}

    const onFinish = (values:any)=>{
        console.log(values,"values")
    }

    const [form] = Form.useForm()


    const onGenderChange = (value)=>{
        switch (value){
            case "male":
                form.setFieldsValue({gender:"male"})
            case "female":
                form.setFieldsValue({gender:"female"})
        }
    }





    const onReset= ()=>{
        form.resetFields()
    }

    const onFill = ()=>{
        form.setFieldsValue({
            username:"waterkid",
            gender:"male"
        })
    }

    const onChange:DatePickerProps["onChange"] = (date,dateString)=>{
        console.log(date,dateString,"date")
    }


    const onOk = (value)=>{
        console.log(value,"value")
    }


    const getEndOfToday = ()=>{
        const date = new Date()
        date.setHours(23,59,59,999)
        return date
    }

    const disabledDate =(current)=> {
        // console.log(current,"current",typeof current)
        return current && current<getEndOfToday()
    }

    const disabledDateTime = (_,type)=>{
        console.log(_,type,"type")
        return {
            disabledHours:()=>[1,2],
            disabledMinutes:()=>[1,2,3],
            disabledSeconds:()=>[1,2,3]
        }
    }


    const formRef = useRef<ProFormInstance>()

    return (
        <div>

        <ProForm
            title="新建表单"
            formRef={formRef}
            formKey="base-form"

            onFinish={(values)=>{
                console.log(values,"values")
            }}

        >

            <ProFormText
                name="name"
                label="label name"
                tooltip="max length 24"
                placeholder="xxx"
                width="md"
            ></ProFormText>

            <ProFormText
                name="company"
                label="label name"
                tooltip="max length 24"
                placeholder="xxx"
                width="md"
            ></ProFormText>


            {/*<ProFormDatePicker name="date" ></ProFormDatePicker>*/}



            <Space>
                {/*
                showTime: 显示时分秒
                */}
                <DatePicker onChange={onChange} showTime onOk={onOk} disableDate={disabledDate}></DatePicker>
                <DatePicker onChange={onChange} picker="year"></DatePicker>
            </Space>


            <div>
                datepicker:
                <DatePicker onChange={onChange} disabledDate={disabledDate} disabledTime={disabledDateTime} showTime></DatePicker>
            </div>

            <div>rangePicker:
            <RangePicker disabledDate={disabledDate}

                         disabledTime={disabledDateTime}
                        showTime={{
                            hideDisabledOptions:true,
                        }}
                       ></RangePicker>
            </div>

            {/*<DatePicker onChange={onChange} */}


            <RangePicker onChange={onChange}

                         showTime={{format:'HH:mm:ss'}}
                         format='YYYY-MM-DD HH:mm'/>

            {/*<RangePicker showTime={{format:'HH:mm'}}></RangePicker>*/}


            <div>
                <Radio.Group>
                    <Radio.Button value="large">large</Radio.Button>
                    <Radio.Button value="middle">middle</Radio.Button>
                </Radio.Group>

                {/*<DatePicker size={}*/}
            </div>
        </ProForm>



        </div>
    )
}

export default CcForm
